<!-- categoryAdd -->
<template>
	<div class="categoryAdd">
		<el-breadcrumb separator="/">
			<el-breadcrumb-item :to="{ path: '/admin/welcome' }">首页</el-breadcrumb-item>
			<el-breadcrumb-item>分类管理</el-breadcrumb-item>
			<el-breadcrumb-item>添加分类</el-breadcrumb-item>
		</el-breadcrumb>
		<el-card>
			<el-form
				:model="addCateForm"
				:rules="addCateRules"
				ref="addCateRef"
				label-width="80px"
				status-icon
			>
				<el-form-item label="分类" prop="pid">
					<el-cascader
						:options="categoryList"
						:props="cascaderProp"
						clearable
						@change="cascaderChange"
					></el-cascader>
				</el-form-item>
				<el-form-item label="标题" prop="title">
					<el-input v-model="addCateForm.title"></el-input>
				</el-form-item>
				<el-form-item label="图片">
					<el-upload
						class="avatar-uploader"
						action="http://localhost:8000/api/utils/upload/"
						name="avatar"
						:limit="1"
						ref="cateUploadRef"
						:on-success="handleAvatarSuccess"
						:on-remove="handleAvatarRemove"
					>
						<img
							v-if="addCateForm.imgsrc"
							:src="'http://localhost:8000/' + addCateForm.imgsrc"
							class="avatar"
						/>
						<i v-else class="el-icon-plus avatar-uploader-icon"></i>
					</el-upload>
				</el-form-item>
				<el-form-item label="是否显示">
					<el-radio-group v-model="addCateForm.is_show" size="mini">
						<el-radio :label="1" border>显示</el-radio>
						<el-radio :label="0" border>隐藏</el-radio>
					</el-radio-group>
				</el-form-item>
				<el-form-item>
					<el-button type="primary" @click="submitForm('addCateRef')">立即创建</el-button>
					<el-button @click="resetForm('addCateRef')">重置</el-button>
				</el-form-item>
			</el-form>
		</el-card>
	</div>
</template>

<script>
//import <组件名称> from '<组件路径>';
import { categoryAddApi } from '@/api/category.js';
export default {
	//注册import导入的组件
	components: {},
	//数据
	data() {
		return {
			addCateForm: {
				pid: '',
				title: '',
				imgsrc: '',
				is_show: 1,
			},
			addCateRules: {
				title: [{ required: true, message: '请输入标题', trigger: 'blur' }],
				pid: [{ required: true, message: '请选择分类' }],
			},
			cascaderProp: {
				checkStrictly: true,
				label: 'title',
				value: 'cid',
				children: 'children',
			},
		};
	},
	//计算属性
	computed: {
		categoryList() {
			return this.$store.state.category.categoryList;
		},
	},
	//侦听器
	watch: {},
	//方法
	methods: {
		handleAvatarSuccess(response) {
			this.addCateForm.imgsrc = response.data.data.path;
		},
		handleAvatarRemove() {
			this.addCateForm.imgsrc = '';
		},
		submitForm(formName) {
			this.$refs[formName].validate(async (valid) => {
				if (valid) {
					try {
						await categoryAddApi(this.addCateForm);
						// vue-router中 / 表示为跟路径 若没有则表示当前最近一级路由
						this.$router.push('list');
					} catch (error) {
						this.$message.error(error.response.data.meta.message);
						return false;
					}
				} else {
					this.$message.error('信息填写不完整');
					return false;
				}
			});
		},
		resetForm(formName) {
			this.$refs[formName].resetFields();
			this.addCateForm.imgsrc = '';
			this.$refs['cateUploadRef'].clearFiles();
		},
		cascaderChange(value) {
			this.addCateForm.pid = value[value.length - 1];
		},
	},
	created() {
		this.$store.dispatch('saveCategoryList', 2);
	},
};
</script>
<style></style>
